<template>
  <div>
    <div>
      <el-card>
        <div class="clearfix" style="margin-bottom:30px">
          <span>居民管理</span>
        </div>
        <el-form :inline="true"  class="demo-form-inline">
          <el-form-item>
            楼栋ID：
            <el-select
              class="input2"
              v-model="query.privice"
              placeholder="请选择"
            >
              <el-option
                v-for="compose in list"
                :key="compose.area_id"
                :label="compose.area_name"
                :value="compose.area_id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            姓名：
            <el-input
              class="input1"
              v-model="key"
              placeholder="居民姓名"
              minlength="20"
            ></el-input>
          </el-form-item>
          <el-form-item>
            电话：
            <el-input
              class="input1"
              v-model="query.idorname"
              placeholder="居民电话"
              minlength="20"
            ></el-input>
          </el-form-item>
          <el-form-item>
            房间号：
            <el-input
              class="input1"
              v-model="query.idorname"
              placeholder="房间号"
              minlength="20"
            ></el-input>
          </el-form-item>
          <el-form-item>
            用户类型：
            <el-select class="input2" v-model="keys" placeholder="请选择">
              <el-option
                v-for="item in getinmatelist"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getinmates" size="big"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
        <div class="set">
          <el-button size="big" type="primary" @click="dialogVisible = true"
            >添加</el-button
          >
          <el-button size="big" type="danger" @click="DelAll"
            >批量删除</el-button
          >
          <el-button size="big" type="success">批量审核</el-button>
        </div>

        <el-table
          size="mini"
          @selection-change="handleSelectionChange"
          :data="getinmate"
          border
          style="width: 100%"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="id" label="id" width="110"></el-table-column>
          <el-table-column prop="" label="头像" width="110"></el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="110"
          ></el-table-column>
          <el-table-column
            prop="usertype"
            label="业主类型"
            width="110"
          ></el-table-column>
          <el-table-column
            prop="sex"
            label="性别"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="cardid"
            label="身份证号"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="mobile"
            label="手机号"
            width="140"
          ></el-table-column>
          <el-table-column
            prop="usernative"
            label="籍贯"
            width="102"
          ></el-table-column>
          <el-table-column
            prop="nation"
            label="民族"
            width="110"
          ></el-table-column>
          <el-table-column
            prop="building"
            label="小区"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="houseid"
            label="房间号"
            width="104"
          ></el-table-column>
          <el-table-column
            prop="stateName"
            label="审核状态"
            width="104"
          ></el-table-column>
          <el-table-column label="操作" width="180px">
            <template slot-scope="scoped">
              <el-button size="big" @click="update(scoped.row)" type="success"
                >修改</el-button
              >
              <el-button type="danger" @click="open(scoped.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[4, 10, 15, 20]"
          :page-size="page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          align="center"
        >
        </el-pagination>
      </el-card>
    </div>

    <!-- 点击修改后打开的东西 -->
    <el-dialog title="添加居民" :visible.sync="xiugai" width="50%">
      <div class="center">
        <!-- 左边 -->
        <el-form ref="form" :model="updata" label-width="80px">
          <div class="left">
            <el-form-item label="楼栋" prop="houseid">
              <el-select
                v-model="updata.houseid"
                style="width: 150px"
                placeholder="请选择活动区域"
              >
                <el-option label="区域一"></el-option>
                <el-option label="区域二"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="房间号" prop="usertype">
              <el-select
                v-model="updata.usertype"
                style="width: 150px"
                placeholder="请选择活动区域"
              >
                <el-option label="区域一"></el-option>
                <el-option label="区域二"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="姓名" prop="name">
              <el-input v-model="updata.name"></el-input>
            </el-form-item>

            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="updata.sex">
                <el-radio label="男" value="0"></el-radio>
                <el-radio label="女" value="1"></el-radio>
              </el-radio-group>
            </el-form-item>
          </div>

          <!-- 右边 -->
          <div class="right">
            <el-form-item label="民族" prop="nation">
              <el-input v-model="updata.nation"></el-input>
            </el-form-item>

            <el-form-item label="籍贯" prop="usernative">
              <el-input v-model="updata.usernative"></el-input>
            </el-form-item>

            <el-form-item label="身份证号" prop="cardid">
              <el-input v-model="updata.cardid"></el-input>
            </el-form-item>

            <el-form-item label="联系电话" prop="mobile">
              <el-input v-model="updata.mobile"></el-input>
            </el-form-item>

            <el-form-item label="住户类型" prop="usertype">
              <el-select
                v-model="updata.usertype"
                style="width: 150px"
                placeholder="请选择活动区域"
              >
                <el-option label="租户"></el-option>
                <el-option label="业户"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="amend">立即创建</el-button>
              <el-button @click="xiugai = false">取 消</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </el-dialog>

    <!-- 点击添加后打开的东西 -->
    <el-dialog title="添加居民" :visible.sync="dialogVisible" width="50%">
      <div class="center">
        <!-- 左边 -->
        <el-form ref="form" :model="form" label-width="80px">
          <div class="left">
            <el-form-item label="楼栋" prop="houseid">
              <el-select
                v-model="form.houseid"
                style="width: 150px"
                placeholder="请选择活动区域"
              >
                <el-option label="区域一"></el-option>
                <el-option label="区域二"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="房间号" prop="usertype">
              <el-select
                v-model="form.usertype"
                style="width: 150px"
                placeholder="请选择活动区域"
              >
                <el-option label="区域一"></el-option>
                <el-option label="区域二"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>

            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="form.sex">
                <el-radio label="男" value="0"></el-radio>
                <el-radio label="女" value="1"></el-radio>
              </el-radio-group>
            </el-form-item>
          </div>

          <!-- 右边 -->
          <div class="right">
            <el-form-item label="民族" prop="nation">
              <el-input v-model="form.nation"></el-input>
            </el-form-item>

            <el-form-item label="籍贯" prop="usernative">
              <el-input v-model="form.usernative"></el-input>
            </el-form-item>

            <el-form-item label="身份证号" prop="cardid">
              <el-input v-model="form.cardid"></el-input>
            </el-form-item>

            <el-form-item label="联系电话" prop="mobile">
              <el-input v-model="form.mobile"></el-input>
            </el-form-item>

            <el-form-item label="住户类型" prop="usertype">
              <el-select
                v-model="form.usertype"
                style="width: 150px"
                placeholder="请选择活动区域"
              >
                <el-option label="租户"></el-option>
                <el-option label="业户"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('form')"
                >立即创建</el-button
              >
              <el-button @click="dialogVisible = false">取 消</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import axios from 'axios';
import {
  getinmate,
  getinmatelist,
  getinmatebuild,
  getinmatedelete,
  userinfoDelAll,
  getinmateadd
} from "../../api/user.js";
export default {
  data() {
    return {
      keys:'',
      key: "", //查询
      page: 1,
      pageSize: 5,
      total: 1, //分页
      getinmate: [],
      list: [],
      xiugai:false,
      getinmatelist: [],
      getinmatebuild: [],
      getinmatedelete: [],
      getinmateadd: [],
      query: {},
      total: 0,
      multipleSelection: [],
      dialogVisible: false,
      selectID: 0,
      form: {
        id: 0,
        // photo: "11",
        name: "",
        houseid: 1,
        usertype: 1,
        sex: 1,
        mobile: "",
        usernative: "",
        cardid: "",
        nation: "",
      },

      // 修改数据
      updata: [
        {
          id: 0,
          photo: "",
          name: "",
          houseid:"",
          usertype:"",
          sex: "",
          mobile: "",
          usernative: "",
          cardid: "",
          nation: "",
        },
      ],
    };
  },
  methods: {

    //修改
				update(option) {
				console.log(option);
				this.updata = option;
				this.xiugai = true;
				// this.amend()
				},

				async amend() {
				let res = await getinmateadd({
					id: this.updata.id,
					photo: this.updata.photo,
					name: this.updata.name,
					houseid: this.updata.houseid,
					usertype: this.updata.usertype,
					sex: this.updata.sex,
					mobile: this.updata.mobile,
          usernative: this.updata.usernative,
          cardid: this.updata.cardid,
          nation: this.updata.nation,
				});
				if (res.errCode == "10000") {
					this.$message({
					type: "success",
					message: "修改成功",
					});
					this.xiugai = false;
					this.getinmates();
				}
				},

    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getinmates();
    },

    handleCurrentChange(val) {
      this.page = val;
      this.getinmates();
    },

    onSubmit() {
      console.log("submit!");
    },
    //添加
    async submitForm() {
      let data = await getinmateadd({
        id: 0,
        name: this.form.name,
        houseid: "",
        usertype: "",
        sex: "",
        mobile: this.form.mobile,
        usernative: this.form.usernative,
        cardid: this.form.cardid,
        nation: this.form.nation,
      });
      console.log(data);
      if ((data.errCode = 10000)) {
        this.dialogVisible = false;
        this.$message({
          type: "success",
          message: "添加成功",
        });
        this.getinmates();
        this.form = "";
      }
    },

    //居民列表渲染  分页内容
    async getinmates() {
      const res = await getinmate({
        page: this.page,
        psize: this.pageSize,
        key: this.key, //查询
      });
      // console.log("111", res);
      this.getinmate = res.data.list;
      this.total = res.data.counts;
      // console.log(res)
    },
    //居民类型渲染
    async getinmatelists() {
      const res = await getinmatelist();
      this.getinmatelist = res.data.list;
      // console.log(res);
    },
    //楼栋ID渲染
    async getinmatebuilds() {
      const res = await getinmatebuild();
      this.getinmatebuild = res.data.list;
      // console.log(res);
    },
    //单选删除
    open(id) {
      console.log(id);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(() => {
        getinmatedelete({ id: id }).then((res) => {
          console.log(res);
          this.getinmates();
          if (res.errCode == 10000) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            // this.getinmatelists();
          }
        });
      });
    },
    //批量删除
    handleSelectionChange(val) {
      console.log(val);
      this.selectID = val;
    },
    DelAll() {
      let ids = [];
      this.selectID.forEach((element) => {
        console.log(element);
        ids.push(element.id);
      });
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(async () => {
          let data = await userinfoDelAll({
            ids: ids,
          });
          if (data.errCode == "10000") {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }
          this.getinmates();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  created() {
    this.getinmates(), this.getinmatelists(), this.getinmatebuilds();
  },
};
</script>





<style lang="less" scoped>
.el-row {
  border-bottom: 1px solid #eee;
  height: 70px;
  line-height: 70px;
}
.clearfix {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.clearfix span {
  color: blue;
}
.el-input {
  width: 70%;
  height: 30px;
  font-size: 12px;
}

.el-select {
  width: 35%;
  height: 30px;
  font-size: 12px;
}
.set {
  margin-top: 20px;
}
.el-table {
  font-size: 12px;
  margin: 10px 0px;
}
.el-breadcrumb {
  margin: 10px 0px;
}
.addright {
  float: right;
}
.el-tag {
  margin: 15px 10px;
}
.el-col-7 {
  width: 27%;
}
.el-table[data-v-09d83b62] {
  font-size: 18px;
  margin: 10px 0px;
}
.center {
  width: 100%;
  height: 400px;
  // background-color: red;
}
.left {
  width: 50%;
  // height: 20px;
  display: inline-block;
  // background-color: pink;
}
.right {
  width: 50%;
  // height: 20px;
  float: right;
  // background-color: rgb(17, 15, 15);
}
</style>
